<script setup lang='ts'>
import { onBeforeMount, onMounted, ref } from 'vue';
import themeColor from '../../utils/colorExtraction';
import PacMan from '../../utils/Pacman.vue'

const swiperList = [
    {
        img: '/src/assets/swiper1.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/swiper2.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
    {
        img: '/src/assets/keqing.png',
        title: '阿斯利康的飞机埃里克森大家立刻反击'
    },
]
const maskBgcList = ref<string[]>([])
const timer = ref(0)
const swiperRef = ref<HTMLElement>()
const maskRef = ref<HTMLElement>()
onMounted(() => {
    let isLoaded = new Array(swiperList.length).fill(false)
    const arr = (swiperRef.value as HTMLElement).children
    for (let i = 0; i < arr.length; i++) {
        const img = arr[i].querySelector('img') as HTMLImageElement
        img.onload = () => {
            isLoaded[i] = true
            if (isLoaded.every(item => item)) {
                for (let i = 0; i < arr.length; i++) {
                    const img = arr[i].querySelector('img') as HTMLImageElement
                    themeColor(1, img, 20, arr => {
                        const color = `rgb(${arr[0][0]},${arr[0][1]},${arr[0][2]})`
                        maskBgcList.value[i] = color
                    })
                }
                (maskRef.value as HTMLElement).style.backgroundColor = maskBgcList.value[1]
            }
        }

    };

    //自动循环定时器
    timer.value = setInterval(() => {
        slide()
    }, 2000)

})


const index = ref(1)
let isSliding = false
/**
 * @param direction 滑动方向，false为左，true为右，默认false
 * @param mode 滑动模式，false有过渡动画，true无过渡动画，默认false
 * @param target 无过渡动画模式下滑动目标索引
*/
const slide = (direction: boolean = false, mode: boolean = false, target?: number) => {
    let distance = 0
    let timer2 = 0

    if (!mode && isSliding) {
        return
    } else if (!mode && !isSliding) {
        isSliding = true
    }
    distance = (direction ? 1 : -1) * 100 / swiperList.length * (1 + (direction ? -1 : 1));

    //滑动动画
    if (!mode) {
        //设置遮罩层背景色
        (maskRef.value as HTMLElement).style.backgroundColor = maskBgcList.value[index.value + (direction ? -1 : 1)];
        index.value += direction ? -1 : 1;
        (swiperRef.value as HTMLElement).style.transform = `translateX(${distance}%)`;
        (swiperRef.value as HTMLElement).style.transition = 'all .3s ease';
    }
    //校对当前索引
    if (index.value >= swiperList.length) index.value = 0
    if (index.value < 0) index.value = swiperList.length - 1
    //替换首尾节点校对节点位置
    timer2 = setTimeout(() => {
        let num = 1
        //提供了mode却没有提供target，target默认为前后一个距离
        if (mode && target === undefined) {
            direction ? target = index.value - 1 : target = index.value + 1
            num = target - index.value
            index.value = target;
            (maskRef.value as HTMLElement).style.backgroundColor = maskBgcList.value[index.value]
        } else if (mode && (target !== undefined)) {
            num = target - index.value
            index.value = target;
            //设置遮罩层背景色
            (maskRef.value as HTMLElement).style.backgroundColor = maskBgcList.value[index.value]
        } else if (!mode) {
            direction ? num = - 1 : num = 1
        }

        if (num >= 0) {
            for (let i = 0; i < Math.abs(num); i++) {
                const first = (swiperRef.value as HTMLElement).querySelector('.img-box')
                swiperRef.value?.appendChild(first as HTMLElement)
            }
        } else {
            for (let i = 0; i < Math.abs(num); i++) {
                const last = (swiperRef.value as HTMLElement).querySelectorAll('.img-box')[swiperList.length - 1]
                swiperRef.value?.prepend(last as HTMLElement)
            }
        }
        distance = -100 / swiperList.length * 1;
        (swiperRef.value as HTMLElement).style.transform = `translateX(${distance}%)`;
        (swiperRef.value as HTMLElement).style.transition = 'all 0s'
        isSliding = false
        clearTimeout(timer2)
    }, mode ? 0 : 300)


}
const mouseEnterOrLeave = (mode: boolean) => {
    if (mode) {
        clearInterval(timer.value)
    } else {
        timer.value = setInterval(() => {
            slide()
        }, 2000)
    }
}
</script>
<template>
    <div class="swiper-content" @mouseenter="mouseEnterOrLeave(true)" @mouseleave="mouseEnterOrLeave(false)">
        <div class="swiper-list clearfix"
            :style="`width:${swiperList.length * 100}%;transform:translateX(${-100 / swiperList.length}%)`"
            ref="swiperRef">
            <div class="img-box" v-for="(item, index) in swiperList" :key="index"
                :style="`width:${100 / swiperList.length}%;`">
                <img :src="item.img" alt="">
            </div>
        </div>
        <div class="swiper-footer" ref="maskRef">
            <div class="left-box">
                <div class="title-bar">{{ swiperList[index].title }}</div>
                <ul class="index-bar">
                    <li v-for="(item, liIndex) in swiperList" :key="liIndex"
                        @click="slide(false, true, (liIndex == 8 ? 0 : liIndex + 1))"
                        :class="(index - 1 < 0 ? swiperList.length - 1 : index - 1) === liIndex ? 'is-active' : ''">
                        <PacMan :length="16" v-if="(index - 1 < 0 ? swiperList.length - 1 : index - 1) === liIndex"
                            class="pacman">
                        </PacMan>
                    </li>
                </ul>
            </div>
            <div class="right-box">
                <div class="left-btn" @click="slide(true)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-left-arrow"></use>
                    </svg>
                </div>
                <div class="right-btn" @click="slide(false)">
                    <svg class="icon" aria-hidden="true" style="transform: rotate(180deg);">
                        <use xlink:href="#icon-left-arrow"></use>
                    </svg>
                </div>
            </div>

        </div>
    </div>
</template>
<style lang='less' scoped>
.swiper-content {
    position: relative;
    width: 100%;
    height: 100%;
    // overflow: hidden;

    .swiper-list {

        // overflow: hidden;
        .img-box {
            float: left;
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .swiper-footer {
        padding: 0 16px;
        z-index: 1;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 870px;
        // background-color: rgb(122, 85, 73);
        -webkit-mask-image: linear-gradient(0, #2f3238 11%, transparent 20%);

        .left-box {
            position: absolute;
            left: 15px;
            bottom: 20px;

            .title-bar {
                font-size: 20px;
                margin-bottom: 10px;
                color: #fff;
            }

            .index-bar {
                .is-active {
                    background-color: rgba(255, 255, 255, 0) !important;
                }

                li {
                    position: relative;
                    display: inline-block;

                    width: 8px;
                    height: 8px;
                    margin: 4px;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, .6);


                    .pacman {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        transform: translate(-50%, -50%)
                    }
                }
            }
        }

        .right-box {
            position: absolute;
            bottom: 42px;
            right: 15px;
            display: flex;
            z-index: 2;
            color: #fff;

            .left-btn,
            .right-btn {
                border-radius: 8px;
                background-color: rgba(255, 255, 255, .1);
                width: 28px;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: all .3s ease;

                &:hover {
                    background-color: rgba(255, 255, 255, .2);
                }
            }

            .left-btn {
                margin-right: 12px;
            }
        }
    }
}
</style>